<template>
  <!-- 聊天界面主页面 -->
  <div class="client-side-wrap">
    <div style="width: 100%;">
      <!-- 顶部组件 -->
      <CommonHeader @isShowNotice="changeShowClientNotice" />
    </div>

    <main class="main-container">
      <!-- 左侧会话列表 -->
      <aside class="left-panel">
        <ConversationList 
          :currentConversationId="currentConversationId"
          :userId="userId"
          @conversation-selected="onConversationSelected"
          ref="ConversationList"
        />
      </aside>

      <section class="chat-container">
        <!-- 对话组件 -->
        <ClientChat 
          ref="ClientChat" 
          :isWeclome="isWeclome" 
          :currentConversation="currentConversation"
          :userId="userId"
          @bullhornOpen="bullhornOpenHandler" 
          @clearChat="clearChatHandler"
          @message-sent="onMessageSent"
          @conversation-created="onConversationCreated"
          @conversation-updated="onConversationUpdated"
        />
      </section>

      <aside class="right-panel">
        <!-- 相关单位组件 -->
        <UnitList></UnitList>
        <!-- 热点问题组件 -->
        <QuestionList @askByReference="onAskByReference"></QuestionList>
        <!-- 客服组件 -->
        <Customer></Customer>
        <!-- 其他 -->
        <Other></Other>
      </aside>
    </main>

    <CallPhone ref="CallPhone"></CallPhone>

    <el-dialog :visible.sync="firstWarning" :close-on-click-modal="false" :show-close="false" :center="true"
      class="el-dialog_notice" width="500px">
      <div class="main_body">
        <div class="warning_head">
          <i class="el-icon-warning" style="font-size: 30px; color: #fd8041;"></i>
        </div>
        <div class="check_main_body">
          <div class="notice_title">使用帮助</div>
          <div class="notice_body">
            <p>欢迎使用AI智能助手！</p>
            <p>您可以通过以下方式与我交流：</p>
            <p>1. 直接输入文字问题</p>
            <p>2. 点击语音按钮进行语音输入</p>
            <p>3. 选择右侧的热点问题进行快速提问</p>
            <p>4. 上传相关文件获取更精准的回答</p>
          </div>
          <div class="check_body">
            <div class="body_confirm_btn" @click="firstWarning = false">我知道了</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonHeader from './components/common-header'
import ConversationList from './components/conversation-list'
import ClientChat from './components/client-chat'
import UnitList from './components/unit-list'
import QuestionList from './components/question-list'
import Customer from './components/customer-service'
import Other from './components/other'
import CallPhone from './components/call-phone'
import { MESSAGE_TYPE } from '@/utils/constants'
import { getCurrentUser, getCurrentUserId } from '@/utils/userService'

export default {
  name: 'Chat',
  components: {
    CommonHeader,
    ConversationList,
    ClientChat,
    UnitList,
    QuestionList,
    Customer,
    Other,
    CallPhone
  },
  data() {
    return {
      isWeclome: true,
      isShowClientNotice: false,
      firstWarning: true,
      currentConversationId: '',
      currentConversation: null,
      userId: '', // 初始化为空，等待从后端获取
      currentUser: null, // 当前登录用户信息
      bullhornOpen: false
    }
  },
  async mounted() {
    // 页面加载时先获取用户信息，然后加载会话列表
    await this.initUserAndLoadConversations();
  },
  methods: {
    /**
     * 初始化用户信息并加载会话列表
     */
    async initUserAndLoadConversations() {
      try {
        console.log('🔄 页面加载，开始获取用户信息...');
        
        // 从后端 API 获取当前用户信息
        this.currentUser = await getCurrentUser();
        if (this.currentUser) {
          // 优先使用 loginName，其次使用 userSn，最后使用 id
          this.userId = this.currentUser.loginName || this.currentUser.userSn || String(this.currentUser.id || '');
          console.log('✅ 获取用户信息成功:', this.currentUser);
          console.log('👤 用户ID:', this.userId);
        } else {
          // 如果获取失败，使用 getCurrentUserId 作为降级方案
          console.warn('⚠️ 获取用户信息失败，使用降级方案');
          this.userId = await getCurrentUserId();
        }
        
        // 等待组件完全挂载后再查询会话列表
        await this.$nextTick();
        
        // 通知会话列表组件加载会话
        if (this.$refs.ConversationList) {
          console.log('📥 通知会话列表组件加载会话，用户ID:', this.userId);
          await this.$refs.ConversationList.loadConversations();
          
          // 等待会话列表加载完成后，自动选择第一个会话
          setTimeout(() => {
            this.autoSelectFirstConversation();
          }, 200);
        } else {
          console.warn('⚠️ 会话列表组件未找到，延迟重试');
          // 如果组件还没挂载，延迟重试
          setTimeout(async () => {
            if (this.$refs.ConversationList) {
              await this.$refs.ConversationList.loadConversations();
              this.autoSelectFirstConversation();
            }
          }, 100);
        }
      } catch (error) {
        console.error('❌ 初始化用户信息或加载会话列表失败:', error);
        // 如果出错，尝试使用降级方案
        try {
          this.userId = await getCurrentUserId();
          if (this.$refs.ConversationList) {
            await this.$refs.ConversationList.loadConversations();
          }
        } catch (fallbackError) {
          console.error('❌ 降级方案也失败:', fallbackError);
          this.$message.error('获取用户信息失败，请刷新页面重试');
        }
      }
    },
    
    /**
     * 自动选择第一个会话
     */
    autoSelectFirstConversation() {
      if (this.$refs.ConversationList && this.$refs.ConversationList.conversations && this.$refs.ConversationList.conversations.length > 0) {
        const firstConversation = this.$refs.ConversationList.conversations[0];
        console.log('🎯 自动选择第一个会话:', firstConversation);
        this.onConversationSelected(firstConversation);
      } else {
        console.log('📝 没有找到会话，显示欢迎界面');
        this.isWeclome = true;
      }
    },
    
    // 清理上下文并开始新对话
    clearChatHandler(type) {
      //点击"清除上下文关联"或"清除历史对话记录"，需要先结束"文字输出"或"语音播报"
      this.$refs.ClientChat.onStopStream()
      
      if (this.$SseCls) {
        this.$SseCls.stopGeneration();
      }
      
      if (type == 'history') {
        // 清除当前会话的消息
        if (this.currentConversationId && this.$refs.ConversationList) {
          this.$refs.ConversationList.updateConversation(this.currentConversationId, {
            messages: [],
            lastMessage: ''
          });
        }
        
        // 通知全局事件
        if (this.$eventHub && this.$eventHub.$emit) {
          this.$eventHub.$emit('client_msgContentChange', {
            chatsContent: [],
            type: MESSAGE_TYPE.CLOSE // "结束会话"事件
          });
        }
        if (this.$SseCls) {
          this.$SseCls.reset();
        }
        this.isWeclome = true;
      } else if (type == 'relation') {
        this.isWeclome = true;
        // 初始化session_id
        if (this.$eventHub && this.$eventHub.$emit) {
          this.$eventHub.$emit('client_msgContentChange', {
            chatsContent: [],
            type: MESSAGE_TYPE.CLOSE // "结束会话"事件
          });
        }
        if (this.$SseCls) {
          this.$SseCls.reset();
        }
      }
    },
    
    /**
     * 发送问题上行消息
     * @param question 问题内容
     */
    onSendQuestion(question) {
      console.log('onSendQuestion', question);
      if (this.bullhornOpen) {
        // 发送问题，关闭所有语音
        this.$refs.ClientChat.handleStopAllAudio()
      }
      // 直接让子组件发送，避免父子双方都发导致重复
      if (this.$refs.ClientChat && this.$refs.ClientChat.beginQuestion) {
        this.$refs.ClientChat.beginQuestion(question)
      }
    },

    // 右侧热点问题、外部触发的参考提问 -> 交给子组件处理
    onAskByReference(question) {
      if (!question) return
      if (this.$refs.ClientChat && this.$refs.ClientChat.beginQuestion) {
        this.$refs.ClientChat.beginQuestion(question)
      }
    },
    
    changeShowClientNotice(type) {
      this.isShowClientNotice = type
    },
    
    stopGenerateAnswer() {
      this.$refs.ClientChat.handleStopAllAudio()
    },
    
    /**
     * 处理语音播报事件
     * @param isOpen 是否开启语音播报
     */
    bullhornOpenHandler(isOpen) {
      console.log('🔊 语音播报状态:', isOpen);
      this.bullhornOpen = isOpen;
    },
    
    /**
     * 会话选择处理
     * @param conversation 选中的会话
     */
    onConversationSelected(conversation) {
      //console.log('📥 父组件收到会话选择事件:', conversation);
      this.currentConversationId = String(conversation.id);
      this.currentConversation = conversation;
      this.isWeclome = false;
      
      // 通知聊天组件加载会话消息
      if (this.$refs.ClientChat) {
        if (conversation.id) {
          // 检查会话ID格式
          const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
          if (uuidRegex.test(conversation.id)) {
            // 对于Dify会话，通过 API 加载消息
            //console.log('📥 加载Dify会话消息，会话ID:', conversation.id);
            this.$refs.ClientChat.loadConversationMessagesFromAPI(conversation.id, this.userId);
          } else {
            // 对于本地数据库会话，清空消息列表（暂时不支持历史消息加载）
            //console.log('📥 检测到本地数据库会话，清空消息列表，会话ID:', conversation.id);
            this.$refs.ClientChat.loadConversationMessages([]);
          }
        } else {
          // 对于新会话，清空消息列表
          //console.log('🆕 创建新会话，清空消息列表');
          this.$refs.ClientChat.loadConversationMessages([]);
        }
      }
    },
    
    /**
     * 消息发送处理
     * @param message 发送的消息
     */
    onMessageSent(message) {
      // 将消息添加到当前会话
      if (this.$refs.ConversationList && this.currentConversationId) {
        this.$refs.ConversationList.addMessageToConversation(this.currentConversationId, message);
      }
    },
    
    /**
     * 会话创建处理
     * @param conversation 新创建的会话
     */
    onConversationCreated(conversation) {
      //console.log('🆕 收到新会话创建事件:', conversation);
      
      // 更新当前会话信息
      this.currentConversationId = String(conversation.id);
      this.currentConversation = conversation;
      
      // 将新会话添加到会话列表
      if (this.$refs.ConversationList) {
        this.$refs.ConversationList.addNewConversation(conversation);
      }
    },
    
    /**
     * 会话更新处理
     * @param data 更新数据 {oldId, newId, conversation}
     */
    onConversationUpdated(data) {
      //console.log('🔄 收到会话更新事件:', data);
      
      // 更新当前会话信息
      this.currentConversationId = String(data.newId);
      this.currentConversation = data.conversation;
      
      // 更新会话列表中的会话
      if (this.$refs.ConversationList) {
        this.$refs.ConversationList.updateConversationId(data.oldId, data.newId, data.conversation);
      }
    }
  }
};
</script>

<style lang="less">
.el-divider__text {
  color: #999;
}

/* 主容器布局 */
.main-container {
  display: flex;
  height: calc(100vh - 80px);
  gap: 16px;
  padding: 16px;
}

/* 左侧面板 */
.left-panel {
  width: 280px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
}

/* 聊天容器 */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 右侧面板 */
.right-panel {
  width: 280px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>